<template>
  <div class="dashboard">
    <div class="dashboard-header">
      <h1>仪表盘</h1>
      <p>欢迎回来，{{ userInfo?.username }}！</p>
    </div>

    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-icon user-icon">
              <el-icon><User /></el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-number">{{ stats.userCount }}</div>
              <div class="stats-label">用户总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-icon article-icon">
              <el-icon><Document /></el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-number">{{ stats.articleCount }}</div>
              <div class="stats-label">文章总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-icon category-icon">
              <el-icon><Folder /></el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-number">{{ stats.categoryCount }}</div>
              <div class="stats-label">分类总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-icon view-icon">
              <el-icon><View /></el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-number">{{ stats.viewCount }}</div>
              <div class="stats-label">总访问量</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="charts-row">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>用户增长趋势</span>
            </div>
          </template>
          <div class="chart-container" ref="userChartRef"></div>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>文章发布统计</span>
            </div>
          </template>
          <div class="chart-container" ref="articleChartRef"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 最新动态 -->
    <el-row :gutter="20" class="activity-row">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>最新用户</span>
              <el-button type="text" @click="$router.push('/users')">查看更多</el-button>
            </div>
          </template>
          <el-table :data="recentUsers" style="width: 100%">
            <el-table-column prop="username" label="用户名" />
            <el-table-column prop="email" label="邮箱" />
            <el-table-column prop="createTime" label="注册时间" />
          </el-table>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>最新文章</span>
              <el-button type="text" @click="$router.push('/articles')">查看更多</el-button>
            </div>
          </template>
          <el-table :data="recentArticles" style="width: 100%">
            <el-table-column prop="title" label="标题" />
            <el-table-column prop="author" label="作者" />
            <el-table-column prop="createTime" label="发布时间" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useUserStore } from '@/store/user'
import {
  User,
  Document,
  Folder,
  View
} from '@element-plus/icons-vue'

/**
 * 用户状态管理
 */
const userStore = useUserStore()

/**
 * 用户信息
 */
const userInfo = computed(() => userStore.userInfo)

/**
 * 图表引用
 */
const userChartRef = ref()
const articleChartRef = ref()

/**
 * 统计数据
 */
const stats = reactive({
  userCount: 0,
  articleCount: 0,
  categoryCount: 0,
  viewCount: 0
})

/**
 * 最新用户
 */
const recentUsers = ref([])

/**
 * 最新文章
 */
const recentArticles = ref([])

/**
 * 获取统计数据
 */
const getStats = async () => {
  try {
    // 模拟数据，实际应该调用API
    stats.userCount = 1234
    stats.articleCount = 567
    stats.categoryCount = 89
    stats.viewCount = 12345
  } catch (error) {
    console.error('获取统计数据失败:', error)
  }
}

/**
 * 获取最新用户
 */
const getRecentUsers = async () => {
  try {
    // 模拟数据，实际应该调用API
    recentUsers.value = [
      {
        username: 'user1',
        email: 'user1@example.com',
        createTime: '2024-01-15 10:30:00'
      },
      {
        username: 'user2',
        email: 'user2@example.com',
        createTime: '2024-01-14 15:20:00'
      },
      {
        username: 'user3',
        email: 'user3@example.com',
        createTime: '2024-01-13 09:45:00'
      }
    ]
  } catch (error) {
    console.error('获取最新用户失败:', error)
  }
}

/**
 * 获取最新文章
 */
const getRecentArticles = async () => {
  try {
    // 模拟数据，实际应该调用API
    recentArticles.value = [
      {
        title: 'AI技术发展趋势',
        author: 'admin',
        createTime: '2024-01-15 14:30:00'
      },
      {
        title: 'Vue3开发指南',
        author: 'admin',
        createTime: '2024-01-14 11:20:00'
      },
      {
        title: 'Spring Boot最佳实践',
        author: 'admin',
        createTime: '2024-01-13 16:45:00'
      }
    ]
  } catch (error) {
    console.error('获取最新文章失败:', error)
  }
}

/**
 * 初始化图表
 */
const initCharts = () => {
  // 这里可以使用 ECharts 或其他图表库
  // 由于没有安装图表库，暂时留空
  console.log('初始化图表')
}

/**
 * 组件挂载时执行
 */
onMounted(async () => {
  await Promise.all([
    getStats(),
    getRecentUsers(),
    getRecentArticles()
  ])
  
  initCharts()
})
</script>

<style scoped>
.dashboard {
  padding: 0;
}

.dashboard-header {
  margin-bottom: 24px;
}

.dashboard-header h1 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.dashboard-header p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.stats-row {
  margin-bottom: 24px;
}

.stats-card {
  height: 120px;
}

.stats-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.stats-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-size: 24px;
  color: white;
}

.user-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.article-icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.category-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.view-icon {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stats-info {
  flex: 1;
}

.stats-number {
  font-size: 28px;
  font-weight: 600;
  color: #303133;
  line-height: 1;
  margin-bottom: 4px;
}

.stats-label {
  font-size: 14px;
  color: #909399;
}

.charts-row {
  margin-bottom: 24px;
}

.activity-row {
  margin-bottom: 24px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
  background-color: #f5f7fa;
  border-radius: 4px;
}

:deep(.el-card__body) {
  padding: 20px;
}

:deep(.el-table) {
  font-size: 14px;
}

:deep(.el-table th) {
  background-color: #fafafa;
}

/* 操作按钮样式优化 */
:deep(.el-button--small) {
  padding: 5px 12px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
}

:deep(.el-button--primary) {
  background: linear-gradient(135deg, #409eff, #3a8ee6);
  border: none;
}

:deep(.el-button--success) {
  background: linear-gradient(135deg, #67c23a, #5daf34);
  border: none;
}

:deep(.el-button--danger) {
  background: linear-gradient(135deg, #f56c6c, #f25c5c);
  border: none;
}

:deep(.el-button--warning) {
  background: linear-gradient(135deg, #e6a23c, #d19e2a);
  border: none;
}

:deep(.el-button--text) {
  color: #409eff;
  font-weight: 500;
  transition: all 0.3s ease;
}

:deep(.el-button--text:hover) {
  color: #3a8ee6;
}
</style>